<template>
  <div id="app">
    <slot name="header" :select="select"></slot>
    <el-table v-if="showTable"
              ref="table"
              border
              :height="height"
              :data="data"
              v-loading="loading"
              tooltip-effect="light"
              v-bind="$attrs"
              v-on="$listeners">
      <div v-if="$slots.empty">
        <slot name="empty"></slot>
      </div>
      <slot/>
    </el-table>
    <slot name="footer" :select="select"/>
    <div style="text-align: right;padding: 48px 0 24px">
      <el-pagination
          background
          :current-page.sync="page.pageNum"
          :page-size.sync="page.pageSize"
          :page-sizes="[10,20,50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="pageSizeChange"
          @current-change="currentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
const INIT_PAGE_NUM = 1
export default {
  name: "PublicTable",
  /* If unaccepted custom attributes rollback to be simple html attribute */
  inheritAttrs: false,
  props: {
    data: {
      type: Array,
      required: true
    },
    height: {
      type: Number,
      required: false
    },
    loading: {
      type: Boolean,
      required: false
    },
    total: {
      type: Number,
      default: 0
    },
    request: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      select: [],
      showTable: true,
      page: {
        pageSize: 10,
        pageNum: INIT_PAGE_NUM
      }
    }
  },
  mounted() {
  },
  methods: {
    pageSizeChange() {
      this.page.pageNum = INIT_PAGE_NUM;
      this.$emit('changePage', '')
      this.request()
    },
    currentChange() {
      this.$emit('changePage', '')
      this.request()
    }
  },
}
</script>

<style scoped>

</style>
